<!--
 * @Author: your name
 * @Date: 2021-08-06 09:47:29
 * @LastEditTime: 2021-08-06 16:55:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-group-ui-master\src\views\components\yytArticle.vue
-->
<template>
  <div class="article">
    <!-- 头部 -->
    <Hearder></Hearder>
    <!-- 体部 -->
    <div class="content" style="min-height:800px" v-loading="loading">
      <div class="wrapper">
        <div class="article_content" v-if="article">
          <div class="title">{{article.title}}</div>
          <div class="info">
            分类：{{article.category?article.category.name:'无'}}
            作者：{{article.baseUser?article.baseUser.realname:'匿名'}}
            发布时间：{{article.publishTime | fmtDate}}
            阅读次数：{{article.readTimes}}
          </div>
          <div class="cc" v-html="article.content"></div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from './components/Header'
import Footer from './components/Footer'
import { get } from '../utils/request'
import { Loading } from 'element-ui'
export default {
  components:{
    Header,Footer
  },
  data(){
    return{
      id:0,
      article:null,
      loading:false
    }
  },
  created(){
    this.id=this.$route.query.id;
    this.loadArticle();
  },
  methods:{
    loadArticle(){
      let url = '/index/article/findById'
      get(url,{id:this.id}).then(resp => {
        this.article = resp.data;
        this.loading=false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
//变量
$color_primary:#028b39;
.article{
  .content{
    background-color: #ecf6f2;
    padding: 1em 0;

    .article_content {
      background-color: #ffffff;
      min-height: 400px;
      border-radius: 5px;
      .title,.info {
        text-align: center;
      }
      .title {
        font-size:28px;
        font-weight:bold;
        line-height: 2em;
        color: black;
      }
      .info {
        padding:0 0 1em;
        width: 80%;
        margin: 0 auto;
        border-bottom: 1px solid #ededed;
        margin-bottom: .5em;
      }
      .cc {
        padding: 0 1em;
        color: black;
      }
    }
  }
}
</style>